import toastComponent from './toast.vue'
import alertComponent from './alert.vue'
import loadingComponent from './loading.vue'

import { createApp } from 'vue'

const _create = (component, propsData = {}) => {
	const app = createApp(component, propsData)
	const root = document.createElement('div')
	const instance = app.mount(root)
	return instance
}

export const toast = (options = {}) => {
	options = 'object' != typeof options ? { content: options } : options
	return new Promise((resolve, reject) => {
		_create(toastComponent, { success: resolve, ...options })
	})
}

export const alert = (options = {}) => {
	options = 'object' != typeof options ? { content: options } : options
	return new Promise((resolve, reject) => {
		_create(alertComponent, { success: resolve, ...options })
	})
}

const _loading = (propsData = {}) => {
	const app = createApp(loadingComponent, propsData)
	return app.mount(document.createElement('div'))
}
export const loading = _loading()

const pop = () => {
	return { toast, alert, loading }
}

export default pop